<template>
  <div class="bg">
    <div class="nav">
      <van-tabs
        @click="onClick"
        class="item-list"
        swipe-threshold="7"
        :ellipsis="false"
        color="#07C6B4"
        title-active-color="#000"
        line-width="50"
        v-model="active"
        swipeable
      >
        <van-tab
          class="item"
          :name="item.id"
          v-for="item in navlist"
          :title="item.name"
        >
        </van-tab>
      </van-tabs>
    </div>
    <div class="jiuyizhinan" v-html="content"></div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { Tab, Tabs, Popup } from "vant";
import { jiuyinavApi, jiuyicontentApi } from "@/service/api.js";

export default {
  name: "index",
  data() {
    return {
      active: "",
      navlist: [],
      apptoken: "",
      titleId: 1,
      content: ""
    };
  },
  created() {
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      console.log(this.apptoken);
    this.getnav();
    this.getcontent();
  },
  methods: {
    getnav() {
      jiuyinavApi({
        apptoken: this.apptoken
      }).then(res => {
        console.log(res);
        this.navlist = res.data;
      });
    },
    getcontent() {
      jiuyicontentApi({
        apptoken: this.apptoken,
        titleId: this.titleId
      }).then(res => {
        console.log(res);
        if (res.data.length > 0) {
          this.content = res.data[0].content;
        } else {
          this.content = "<p>暂无指南</p>";
        }
      });
    },
    onClick(name) {
      console.log(name);
      this.titleId = name;
      this.getcontent();
    }
  }
};
</script>
<style lang="scss">
.jiuyizhinan {
  width: 100%;
  margin: 0 auto;
  margin-top: 0.3rem;
  font-size: 0.35rem;
  img {
    width: 100%;
    height: 5rem;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
  }
  p {
    line-height: 0.4rem;
    letter-spacing: 1px;
    font-size: 0.35rem;
  }
}
</style>
<style lang="scss" scoped>
.bg {
  width: 90%;
  margin: 0 auto;
}
.nav {
  width: 100%;
  height: 1rem;
  margin-top: 1rem;
}
</style>
